<!--
 * @Descripttion: 工具栏
 * @version: 
 * @Author: wangys
 * @Date: 2022-12-28 15:05:20
-->
<template>
  <div class="tool">
    <div class="tool-container">
      <div
        class="card"
        @click="handleToLink(item.url)"
        v-for="item in cardList"
      >
        <div>
          <img :src="item.img" alt="" style="width: 50px" />
          <span class="text"> {{ item.text }}</span>
        </div>
        <p class="introduce">{{ item.introduce }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tool',
  components: {},
  props: {},
  data() {
    return {
      cardList: [
        // {
        //   text: 'PDF合并',
        //   introduce: '将多个PDF文件或页面合并成单个PDF文件',
        //   url: 'https://www.67tool.com/pdf/merge',
        //   img: 'https://file-gz1.67tool.com/file/icon/min/O7P0OV5e3C_8JqwWkIXcu3qx.webp'
        // },
        // {
        //   text: 'PDF提取',
        //   introduce: '提取PDF文档中的一个或多个页面保存为单个文件',
        //   url: 'https://www.67tool.com/pdf/extract',
        //   img: 'https://file-gz1.67tool.com/file/icon/min/49xfbxg6CKLuuozs6muxP1on.webp'
        // },
        // {
        //   text: 'PDF拆分',
        //   introduce: '拆分PDF文档的一个或多范围内的页面，保存为独立文件',
        //   url: 'https://www.67tool.com/pdf/range',
        //   img: 'https://file-gz1.67tool.com/file/icon/min/IG1rWjw8xxjX7Qy3ZWE4hrlR.webp'
        // },
        {
          text: 'JQueryAPI',
          introduce: 'JQueryAPI中文在线手册',
          url: 'https://jquery.cuishifeng.cn/',
          img: ''
        },
        {
          text: 'jQuery中文网',
          introduce: 'jQuery API 中文文档',
          url: 'https://www.jquery123.com/',
          img: ''
        },
        {
          text: 'jQuery插件库',
          introduce: '收集最全最新最好的jQuery插件',
          url: 'https://www.jq22.com/',
          img: ''
        },
        {
          text: 'jQuery之家',
          introduce: '自由分享jQuery的插件库',
          url: 'http://www.htmleaf.com/',
          img: ''
        },

        {
          text: '现代JavaScript教程',
          introduce: '基础到高阶的JavaScript相关知识',
          url: 'https://zh.javascript.info/',
          img: 'https://pgs98.com/img/xdjs.f375b5e0.png'
        },
        {
          text: 'ES6 入门教程',
          introduce: 'ECMAScript6新语法特性。',
          url: 'https://es6.ruanyifeng.com/',
          img: ''
        }
      ]
    }
  },
  created() {},
  mounted() {},
  methods: {
    //点击跳转
    handleToLink(url) {
      window.open(url, '_blank')
      // window.location.href = url
    }
  }
}
</script>
<style scoped lang="less">
.tool {
  width: 100%;
  height: 100%;
  .tool-container {
    display: flex;
    flex-wrap: wrap;
    width: 1080px;
    margin: 50px auto 0;
    .card {
      width: 320px;
      height: 100px;
      margin: 40px 40px 0 0;
      padding: 10px;
      box-shadow: 1px 1px 2px rgba(30, 188, 240, 0.3),
        0 0 25px rgba(30, 188, 240, 0.3), 0 0 5px rgba(30, 188, 240, 0.3);
      background: rgba(30, 188, 240, 0.3);
      &:hover {
        box-shadow: 3px 3px 4px rgba(30, 188, 240, 0.3),
          0 0 30px rgba(30, 188, 240, 0.3), 0 0 8px rgba(30, 188, 240, 0.3);
      }
      .text {
        font-size: 24px;
      }
      .introduce {
        opacity: 0.8;
      }
    }
  }
}
</style>
